<template>
  <div id="index">
    <dv-border-box-13 :color="['#2862b7']" class="box">
      <el-row :gutter="18" class="el-box">
        <el-col :span="9">
          <div class="box-l">
            <div class="tit">{{ res.name }}</div>
            <div class="text">{{ res.description }}</div>
            <!-- 左侧按钮 -->
            <div class="btn-l">
              <div class="btn-gohome" @click="goHome">
                <dv-decoration-11 style="width:14vw;height:4vw;">返回</dv-decoration-11>
              </div>
              <div v-show="res.link !== null " class="btn-link" @click="linkOpen">
                <dv-decoration-11 style="width:14vw;height:4vw;">
                  点击跳转项目驾驶舱
                </dv-decoration-11>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="15" class="box-r">
          <!-- 有视频渲染盒子1 -->
          <div v-if="videoShow !=='' " class="box1">
            <div class="box-banner">
              <el-carousel :interval="6000" type="always" height="30vh">
                <el-carousel-item v-if="imageData=== '' " style="text-align: center;">
                  <span class="loadding">图片加载中...</span>
                </el-carousel-item>
                <el-carousel-item v-for="item in imageData" v-else :key="item.index" style="text-align: center;">
                  <el-image :src="'data:image/jpeg;base64,'+item" class="image" style="text-align: center;" fit="contain" alt="alt" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="box-video">
              <video controls="controls" class="vid" autoplay muted>
                <source :src="video" type="video/mp4">
              </video>
            </div>
          </div>
          <!-- 没有视频渲染盒子2 -->
          <div v-else class="box2">
            <div class="box-banner">
              <el-carousel :interval="6000" type="always" height="50vh">
                <el-carousel-item v-if="imageData=== '' " style="text-align: center;">
                  <span class="loadding">图片加载中...</span>
                </el-carousel-item>
                <el-carousel-item v-for="item in imageData" v-else :key="item.index" style="text-align: center;">
                  <el-image :src="'data:image/jpeg;base64,'+item" class="image" style="text-align: center;" fit="contain" alt="alt" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>

        </el-col>
      </el-row>

    </dv-border-box-13>
  </div>
</template>

<script>
import { getDetailByid, getByCondition, getPictureById } from '../../api/detailPage'
import drawMixin from '../../utils/drawMixin' // 自适应缩放
export default {
  name: 'QsgSystemIndex',
  mixins: [drawMixin],
  data() {
    return {
      res: {},
      video: '',
      videoShow: null,
      imageData: '',
      alt: ''
    }
  },

  mounted() {
    const userId = this.$route.params.id
    console.log(userId)
    // 使用 userId 进行相应的逻辑处理

    this.getDetail()
    this.getVideo()
    this.getImageApi()
  },
  created() {
    this.getByconditionApi()
  },
  methods: {
    // 获取页面数据
    async getDetail() {
      const res = await getDetailByid(this.$route.params.id)
      console.log(res)
      this.res = res
    },
    // 获取视频流
    getVideo() {
      this.video = `http://115.29.207.19:8086/example/getVideo?exampleId=${this.$route.params.id}`
    },
    // 判断是否有视频流
    async getByconditionApi() {
      const res = await getByCondition(this.$route.params.id)
      // console.log(res)
      this.videoShow = res.video
    },
    // base64图片接口
    async getImageApi() {
      const res = await getPictureById(this.$route.params.id)
      // console.log(res)
      this.imageData = res
    },
    // 返回首页
    goHome() {
      this.$router.push('/')
    },

    linkOpen() {
      window.location.href = this.res.link
    }
  }
}
</script>

<style lang="scss" scoped>
//全局样式部分！！！！
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  box-sizing: border-box;

}
html {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}
  #index {
  // color: #d3d6dd;
  // width: 1920px;
  // height: 1080px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  margin-bottom: 100px;
  width: 100%;
  height: 100%;
  padding: 26px 26px 26px 26px;
  background-image: url("../../assets/pageBg.png"); //背景图
  background-size: cover; //背景尺寸
  background-position: center center; //背景位置
  color: #f1f1f1;

  }
  .box {
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
     .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-box {
    height: 100%;
  }
    .box-l {
    height: 100%;
      .tit {
    margin: 10% 0 7% 10%;
    color: #fff;
    font-size: 2vw;
    white-space: nowrap;
    font-weight: 700;
    font-family: PingFangSC-Semibold,PingFang SC;
   }
   .text {
    height: 58vh;
    width: 80%;
    margin: 0 10%;
    padding: 0 10px;
    line-height: 2;
    font-size: 1vw;
    overflow-y: auto;
    font-family: PingFangSC-Semibold,PingFang SC;

   }
    .text::-webkit-scrollbar {
      width: 0.3vw;
      margin-left: 1vw;
    }
    .text::-webkit-scrollbar-track {
      // background-color: red;
      background-color: #fff;
      border-radius: 0.15vw;

    }
    .text::-webkit-scrollbar-track-piece{
      background-color: #fff;
      border-radius: 0.15vw;
    }
    .text::-webkit-scrollbar-thumb{
      background-color: #757575;
      border-radius: 0.15vw;
    }

   }
  //  .btn {
  //   position: absolute;
  //   bottom: 5%;
  //   left: 5%;
  //   font-size: 1vw;
  //   font-weight: 700;
  //  }
  .btn-l {
    display: flex;
    justify-content: space-between;
    padding: 0  10%;
    margin-top: 2vw;
    .btn-gohome {
      width: 14vw;
      height: 4vw;
      cursor: pointer;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 700;
      font-size: 1vw;

    }
    .btn-link {
      width: 14vw;
      height: 4vw;
      cursor: pointer;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 700;
      font-size: 1vw;

    }
  }
  .box-r {
    // 有视频显示盒子1
    height: 100%;
    .box1 {
         .box-banner {
         margin: 0 auto;
         margin-top: 8%;
         height: 30vh;
         width: 50vw;
                .image {
        width: 70%;
        height: 100%;
       }
       .loadding {
        padding-top: 20vh;
        width: 1vw;
        height: 1vh;
       }
       }
        .box-video {
          text-align: center;
          margin: 5% auto;
          height: 40vh;
          width: 50vw;
              .vid {
          width: 70%;
          height: 100%;
        }
      }
    }
    // 盒子2
    .box2 {
     height: 100%;
    .box-banner {
      margin: 0 auto;
      margin-top: 20%;
      width: 60vw;
      height: 70vh;
     .image {
    width: 70%;
    height: 100%;
   }
    }
    }

  }

  ::v-deep .el-image__placeholder {
    background: url('../../assets/image/niu.png') no-repeat 50% 50%;
    background-size: 50%;
    width: 100%;
    height: 100%;

  }
  }
</style>
